<template>
    <div id="index">
        <!-- money-amount -->
        <div class="loan-out-index-wrapper have-footer wrapper" ref='content'>
            <div class="loan-out-index-box">
                <header class='index-header'>
                    <div class="left">
                        <img src="../images/home_logo@3x.png" width="40">
                        <p class='font-title'>金多多</p>
                        <!--金多多-->
                    </div>
                    <div class="right">
                        <img src="../images/home_mine@3x.png" width="40" @click='show_mine = true'>
                    </div>
                </header>
                <div class="banner-box" v-if='bannerList.length' >
                    <slide
                        swiperId='banner'
                        :loop='false'
                        :autoplay='3000'>
                        <div class='banner__item' v-for='item in bannerList'>
                            <a :href="item.jumpUrl"><img :src="item.imageUrl"></a>
                        </div>
                    </slide>
                    <img src="../images/boxshadow@3x.png" width="100%">
                </div>
                <div class="banner-box" style='width:100%;padding-top:50%;' v-else></div>
                <div class="index-steps" style="margin-top:20%;">
                    <div class="index-step">
                        <img src="../images/step_1@3x.png" width="48">
                        <p class='font-caption'>旧机评估</p>
                    </div>
                    <img class="index-step-split" src="../images/step_next@3x.png" width="32" height="10">
                    <div class="index-step">
                        <img src="../images/step_2@3x.png" width="48">
                        <p class='font-caption'>在线回收</p>
                    </div>
                    <img class="index-step-split" src="../images/step_next@3x.png" width="32" height="10">
                    <div class="index-step">
                        <img src="../images/step_3@3x.png" width="48">
                        <p class='font-caption'>闪电结款</p>
                    </div>
                </div>
                <div class="index-test">
                    <div class="test-before" v-show='showpg'>
                        <img width="200" src="../images/home_img_checkbg@3x.png">
                        <div class='button' @click="btnFn">一键智能检测</div>
                        <p class='font-caption'>测测我的手机回收价格</p>
                    </div>
                    <div class="test-after" v-show='showpg11'>
                        <p class='title'>检测结果</p>
                        <div class="result-info">
                            <p><span>手机型号  |</span> {{deviceName}} </p>
                            <p><span>系统版本  |</span> {{ver}} </p>
                           <!--  <p>{{getDevice}}</p> -->
                        </div>
                        <!-- <span class="status" 
                            v-if='info.loanStatus >= 10 && info.loanStatus < 30'>审核中</span>
                        <span class="status" 
                            v-if='info.loanStatus == 30'>放款中</span>
                        <span class="status red" v-if='info.loanStatus <= -1 || info.authStatus <= -1'>未通过</span> -->

                       <!--  <p class='result-money'>最高回收价  |<span>{{loanInfo.applyAmount | toYuan('int')}}元</span></p>
                       <div class="button"  @click='tips(),log("c_loan")'>立即评估, 闪电结款</div> -->
                       <!--  <div class="button" v-if='info.loanStatus==40 &&info.lendStatus==40'
                           v-else-if='info.loanStatus >0 && info.loanStatus<=40' @click='goRouter("check"),log("c_query")'>
                           查看评估进度
                       </div> -->
                       <!--  <div class="button" v-else-if='info.authStatus === 0 ' @click='goRouter("auth"),log("c_loan")'>立即评估, 闪电结款</div>
                       <div class="button" v-else @click='tips(),log("c_loan")'>立即评估, 闪电结款</div> -->
                        
                        <!-- <div class="reject-reason" v-if='info.loanStatus <= -1'>
                            <span class='icon'><img src="../images/fail_notice@3x.png" width="32"></span>
                            <div class='text'>goRouter("apply")
                                <p>{{loanInfo.checkMsg}}</p>
                                <p v-if='loanInfo.nextLoanTime'>{{loanInfo.nextLoanTime | dateFormat}}可再次申请</p>
                            </div>
                        </div>
                        <div class="reject-reason" v-if='info.loanStatus > -1 && info.authStatus <= -1'>
                            <span class='icon'><img src="../images/fail_notice@3x.png" width="32"></span>
                            <div class='text'>
                                <p>{{authInfo.checkMsg}}</p>
                                <p v-if='authInfo.nextAuthTime'>{{authInfo.nextAuthTime | dateFormat}}可再次申请</p>
                            </div>
                        </div> -->
                         <p class='result-money'>最高回收价  |<span>{{loanInfo.applyAmount | toYuan('int')}}元</span></p>
                        <div class="button"  @click='tips(),log("c_loan")'>立即评估, 闪电结款</div>
                       <!--  <div class="button" 
                           v-else-if='info.loanStatus >0 && info.loanStatus<=40' @click='goRouter("check"),log("c_query")'>
                           查看评估进度
                       </div> -->
                       <!--  <div class="button" v-else-if='info.authStatus === 0 ' @click='goRouter("auth"),log("c_loan")'>立即评估, 闪电结款</div> -->
                        <!-- <div class="button" v-else @click='tips(),log("c_loan")'>立即评估, 闪电结款</div> -->
                        
                        <div class="reject-reason" v-if='info.loanStatus <= -1'>
                            <span class='icon'><img src="../images/fail_notice@3x.png" width="32"></span>
                            <div class='text'>
                                <p>{{loanInfo.checkMsg}}</p>
                                <p v-if='loanInfo.nextLoanTime'>{{loanInfo.nextLoanTime | dateFormat}}可再次申请</p>
                            </div>
                        </div>
                        <div class="reject-reason" v-if='info.loanStatus > -1 && info.authStatus <= -1'>
                            <span class='icon'><img src="../images/fail_notice@3x.png" width="32"></span>
                            <div class='text'>
                                <p>{{authInfo.checkMsg}}</p>
                                <p v-if='authInfo.nextAuthTime'>{{authInfo.nextAuthTime | dateFormat}}可再次申请</p>
                            </div>
                        </div>
                    </div>
                </div>
                <img src="../images/boxshadow@3x.png" width="100%">
                <ul class="button-bar">
                    <li class="button-item" @click='goHelp'>
                        <img src="../images/home_img_help@3x.png">
                        <p>使用帮助</p>
                    </li>
                    <li class="button-item" @click='goService'>
                        <img src="../images/home_img_cs@3x.png" alt="">
                        <p>联系客服</p>
                    </li>
                </ul>
            </div>
        </div>
        
        <transition name='fade'>
            <div class="user-mine-box" :class='{in:show_mine}' v-show='show_mine'>
                <div class="user-mask" @click='show_mine = false'></div>
                <div class="user-mine">
                    <div class="user-info">
                        <img src="../images/home_mine@3x.png" class="user-logo">
                        <div class="user-mobile font-title" v-if='sessionId'>
                            <template v-if='userInfo.name'>{{ userInfo.name}}</template>
                            <template v-else>{{ userInfo.userPhone | mobile}}</template>
                        </div>
                        <div class="button user-login" v-else @click='showLogin = true'>登录</div>
                    </div>
                    <ul class="user-menu">
                        <!-- <li @click='goRouter("bankcard-list")'>银行卡</li> -->
                        <li @click='goRouter("about")'>关于我们</li>
                    </ul>
                    <div class="user-logout" v-if='sessionId' @click='show_modal_logout = true'>退出登录</div>
                </div>
            </div>
        </transition>

        <footer-bar></footer-bar>

        <login
            :show='showLogin'
            @finish='getConfig'
            @showAgreement='show_agreement = true'
            @close='showLogin = false'></login>

        <agreement
            :show='show_agreement'
            type='register'
            @close='show_agreement=false'></agreement>

        <confirm 
            :show='show_modal_logout'
            @close='show_modal_logout = false'
            @confirm='logout'
            title='确认退出'
            tips='是否确认退出登录'></confirm>

        <modal
            class='modal-success'
            :closeButton='true'
            :maskClose='false'
            @close='show_modal_android = false'
            :show='show_modal_android'>
            <img src="../images/img_market.png" width="96">
            <p>海量借款平台</p>
            <span>轻松借款，超低门槛</span>
            <div class="button transparent" @click='goFinanceMarket'>即将进入贷款超市 {{second}}s..</div>
        </modal>

    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import agreement from '../components/Agreement.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import countDown from '../components/CountDown.vue'
    import slide from '../components/Slide.vue'
    import toYuan from '../filters/filter-toYuan'
    import login from '../components/Login.vue'
    import dateFormat from '../filters/filter-dateFormat'
    import { timeToHours } from '../filters/filter-timeFormat'
    import mobile from '../filters/filter-mobile'
    import { convertRequestURL } from '../utils/utils'
    import  { mapGetters, mapActions }  from 'vuex'
    import { addLenderValidation, resetAccountPasswordValidation, operatorEditValidation } from '../validation/validation'
    import { allApi, contactApi, loanOutApi, messageApi, indexApi, userApi } from '../api/api'
    import { scrollLoading, scrollLoadingOff, getOS, getVersion , getDevice} from '../utils/utils'
    import moment from 'moment'

    export default {
        components:{
            login,
            footerBar,
            agreement,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            pickerList,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            slide,
            buttonLoading,
            pagination,
            payPassword,
            countDown,
        },
        filters:{
            toYuan,
            mobile,
            dateFormat,
            timeToHours,
            diffDay(time){
                let now = moment()
                let day = moment(time)
                let diff = day - now
            },
            toYuanInt(money){
                if(money === 0) return '0'
                else if(!money) return '0'
                else if(money >= 1000000){
                    return Number((money/1000000).toFixed(2)) + '万'
                }
                else return Number((money/100).toFixed(2))
            }

        },
        data() {
            return {
                index:0,
                info:{},
                len:'',
                show_mine:false,
                ver:getVersion(),
                loanInfo:{},
                authInfo:{},
                second:3,
                showLogin:false,
                loading_switch:false,
                bannerList:[],
                payPasswordShow:false,
                show_modal_logout:false,
                show_modal_borrow:false,
                show_modal_android:false,
                show_agreement:false,
                placeholder:'--',
                userCount:'',
                info:{},
                showpg:"",
                showpg11:"",
                getDevice:"",
                titletxt:"",
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
            ]),
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            deviceName(){
                return this.localInfo.deviceName
            },
            shows(){
                return this.localInfo.shows
            },
            serviceUrl(){
                let href
                if(this.configInfo.serviceCall){
                    href = `tel:${this.configInfo.serviceCall}`
                }
                else{
                    href = this.configInfo.serviceUrl
                }
                return href
            },
            sessionId(){
                return this.localInfo.sessionId
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            needLogin(){
                return this.localInfo.needLogin
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setSessionId',
                'setNeedLogin',
                'setAuthIdImgs',
                'setlocalInfo'
            ]),

            // filters
            btnFn(){
                let ss={
                    showpg:false,
                    showpg11:true,
                }
                this.showpg=false
                this.showpg11=true
                    
            },
            // function
            log(eventName,eventLabel){
                let eventParams = {}
                if(eventLabel){
                    eventParams = {
                        e_n:eventName,
                        e_v:{
                            value:eventLabel
                        }
                    }
                }
                else{
                    eventParams = {
                        e_n:eventName
                    }
                }
                return allApi.log(eventParams)
            },
            goFinanceMarket(){
                location.href = 'http://xssd.fanzhoutech.com/mobile/applyform?par=495A3784521D54E90579FC4888E0F8BE'
            },
            delayHandle(){
                this.second = 3
                this.countDown(()=>{
                    this.goFinanceMarket()
                })
            },
            countDown(callback){
                const time = setTimeout(()=>{
                    if(this.second == 1){
                        callback && callback()
                        return
                    }
                    this.second --
                    this.countDown(callback)
                },1000)
            },
            goService(){
                let timeout = true
                this.log('c_customer')
                .then(result=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                .catch(error=>{
                    timeout = false
                    location.href = this.serviceUrl
                })
                setTimeout(()=>{
                    if(timeout){
                        location.href = this.serviceUrl
                    }
                },3000)
            },
            goHelp() {
                location.href = localStorage.helpUrl
            },
            goRouter(name){
                /*if(getOS() == 'Android' && !this.configInfo.supportCashLoan){
                    this.show_modal_android = true
                    this.delayHandle()
                    return
                }*/

                if(!this.checkLogin()) return false

                this.$router.push({
                    name:name
                })
            },
            logout(){
                this.showLoading()
                userApi.logout()
                .then(result=>{
                    this.hideLoading()
                    this.show_modal_logout = false
                    this.setSessionId('')
                    this.setAuthIdImgs('remove')
                    this.setNeedLogin(true)
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            tips(){
                if(!this.checkLogin()) return
                 
                this.setMsgTip({
                    text:'申请借款成功！审核结果请下载app查看！',
                    type:'warn'
                })
                let timer=null;
                clearTimeout(timer)
                timer=setTimeout(function(){
                    
                    if (getOS() == "iOS") {
                        window.location.href="http://zhixunnaisifile.dai3000.com/gw/index.html" 
                    } else if (getOS() == "Android") {
                        window.location.href="http://android.myapp.com/myapp/detail.htm?apkName=com.zxns.lotgold"
                    }
                },1500)
            },
            goLoan(){
                if(this.info.authStatus === 0){
                    this.$router.push({
                        name:'auth'
                    })
                    return
                }
                this.$router.push({
                    name:'apply'
                })
            },
            checkLogin(){
                if(!this.sessionId){
                    /*if(getOS() == 'Android' && !this.configInfo.supportCashLoan){
                        this.show_modal_android = true
                        this.delayHandle()
                        return
                    }*/
                    this.showLogin = true
                    return false
                }
                return true
            },
            getConfig(){
                this.showLoading()
                indexApi.appConfigData()
                .then(result=>{
                    this.len = result.loanRecord.applyAmounts.length
                    result.loanRecord.applyAmount = result.loanRecord.applyAmounts[this.len-1]
                    this.info = result
                    this.loanInfo = result.loanRecord
                    this.authInfo = result.authProgress
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            },
            getAdlist(){
                indexApi.banner()
                .then(result=>{
                    this.bannerList = result
                    console.log(this.bannerList)
                    this.hideLoading()
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        mounted(){
            this.showpg=this.localInfo.shows.showpg
            this.showpg11=this.localInfo.shows.showpg11
            //this.getDevice=getDevice()
        },
        created(){
            this.getConfig()
            this.getAdlist()
        },
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    #index{
        .index-header{
            padding: 8px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .left{
                display: flex;
                align-items: center;
                .font-title{
                    color:$importColor;
                    margin-left: 8px;
                }
            }
        }
        .index-steps{
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            p{
                line-height: 26px;
                white-space: pre;
                font-weight: normal;
            }
        }
        .index-step-split{
            padding: 0 19px;
        }
        .index-test{
            margin:24px 16px 0 16px;
            text-align: center;
            background: url(../images/boxtexture@3x.png);
            background-size: 100% auto;
        }
        .test-before{
            img{
                padding-top: 16px;
            }
            .button{
                margin:-24px auto 0 auto;
            }
            .font-caption{
                color:$importColor;
                padding-top: 8px;
                padding-bottom: 24px;
            }
        }
        .test-after{
            overflow:hidden;
            padding-bottom: 20px;
            .title{
                background: url(../images/bg_title@3x.png) no-repeat center center;
                background-size: 104px 26px;
                -webkit-background-size: 104px 26px;
                width: 104px;
                height: 26px;
                margin:16px auto;
                line-height: 26px;
                text-align: center;
                color:#fff;
            }
        }
        .result-info{
            @extend %font-body2;
            p{
                margin-top: 8px;
                color:$importColor;
                span{
                    color:$defaultColor;
                }
            }
        }
        .result-money{
            margin: 16px 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-top: 1px solid $sectionColor;
            padding-top: 12px;
            @extend %font-body2;
            color:$themeColor;
            span{
                margin-left: 9px;
                font-size: 21px;
                line-height: 32px;
                color:$importColor;
            }
        }
        .loan-card{
            z-index:2;
            text-align: center;
            margin: 16px;
            background-color: #fff;
            border-radius:4px;
            padding: 24px 16px;
            box-shadow:0 0 4px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,4,8,0.12);
            position: relative;
            .status{
                @extend %font-caption;
                position: absolute;
                right:0;
                top:34px;
                color:#fff;
                background-color: $blue;
                border-radius:12px 0 0 12px;
                padding: 2px 17px;
                &.red{
                    background-color: $red;
                }
            }
            .name{
                @extend %font-body1;
            }
        }
        .loan-info{
            padding-top: 16px;
            display: flex;
            text-align: center;
        }
        .loan-info__item{
            width: 30%;
            flex:1;
            @extend %font-caption;
            padding-bottom: 16px;
            p{
                padding-top: 4px;
                color:$importColor;
                @extend %font-title;
            }
        }
        .button-bar{
            display: flex;
            padding-top: 5px;
            justify-content: center;
        }
        .button-item{
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 16px;
            &:after{
                content:'';
                position: absolute;
                right:0;
                border-right: 1px solid $sectionColor;
                top:-2px;
                height:24px;
            }
            &:last-child:after{
                display: none;
            }
            img{
                width: 18px;
                height: 18px;
                display: block;
                padding-right:10px;
            }
            p{
                @extend %font-caption;
                color:#FAAD14;
            }
        }
        .user-mobile{
            color:$importColor;
            padding-top: 16px;
        }
        .user-info{
            padding-bottom: 20px;
            border-bottom: 1px solid $sectionColor;
            margin: 0 20px;
        }
        .user-mine-box{
            position: absolute;
            top:0;
            right: 0;
            left: 0;
            bottom: 0;
            z-index:2;
            transition:all ease .3s;
        }
        .fade-enter .user-mask,
        .fade-leave-active .user-mask {
            opacity:0;
        }
        .fade-enter .user-mine,
        .fade-leave-active .user-mine {
            transform:translate3d(100%,0,0);
        }
        .user-mask{
            position: absolute;
            top:0;
            right: 0;
            left: 0;
            bottom: 0;
            transition:all ease 200ms;
            background-color: $defaultColor;
        }
        .user-mine{
            width: 200px;
            position: absolute;
            top:0;
            bottom: 0;
            right:0;
            z-index:2;
            background-color: #fff;
            text-align: center;
            transition:all ease 200ms;
        }
        .user-logo{
            width: 56px;
            height: 56px;
            padding-top: 48px;
        }
        .user-login{
            width: 100px;
            margin-top: 16px;
            height: 36px;
            line-height: 36px;
        }
        .user-menu{
            padding-top: 36px;
            padding-bottom: 28px;
            @extend %font-body2;
            li{
                padding: 12px;
            }
        }
        .user-logout{
            border-top: 1px solid $sectionColor;
            padding-top: 24px;
            margin-left: 50px;
            margin-right: 50px;
            @extend %font-button;
            color:#DD2C00;
        }
        #applyAmounts{
            border-bottom: 1px solid $sectionColor;
            padding-bottom: 8px;
        }
        .amount__item{
            width: (100%/3);
            &.swiper-slide-active,&.active{
                .amount{
                    font-size: 45px;
                    color:$orange;
                    font-weight: normal;
                }
            }
            &.active{
                margin:0 auto;
            }
        }
        .amount{
            transition:all ease 200ms;
            color:$importColor;
            font-size: 25px;
            font-weight: 300;
            line-height: 68px;
            i{
                @extend %font-body1;
            }
        }
        .reject-reason{
            display: flex;
            justify-content: center;
            align-items: center;
            padding:9px 10px;
            margin-top: 8px;
            background-color: rgba(#000,.12);
            .icon{
                display: block;
                width: 32px;
            }
            .text{
                padding-left: 8px;
                @extend %font-caption;
            }
        }
        .tips{
            text-align: left;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            padding-top: 10px;
            .iconfont{
                font-size: 11px;
            }
            p{
                line-height: 1.3;
                padding: 0 22px;
            }
        }
        .modal-success{
            text-align: center;
            p{
                padding-top: 8px;
                @extend %font-button;
                color:$importColor;
            }
            span{
                padding-top: 16px;
                display: block;
                @extend %font-body1;
            }
            .button{
                margin-top: 30px;
            }
        }
    }

</style>
